<template>
	<div class="newInfoBox">
		<div class="handbook">
			<video x5-video-player-type="h5" x5-playsinline="true" webkit-playsinline playsinline :id="'myVideo1'"
				class="video-js" controls autoplay>
				<source :src="url" type="video/mp4" />
			</video>
		</div>
	</div>
</template>
<script>
	export default {
		name: "Video",
		data() {
			return {
				url: '',
			};
		},
		created() {
			const {
				query
			} = this.$route;
			this.url = query.url
		},
		mounted() {},
		methods: {}
	};
</script>
<style scoped>
	body {
		background: #f6f5ef;
	}

	.newInfoBox {
		width: 100%;
		background: #000;
		height: 100vh;
		display: flex;
		align-items: center;
		padding: 0;
	}

	.headerTop {
		height: 0.45rem;
		background: #fff;
		box-shadow: 0 0 0.08rem #ddd;
		padding: 0 0.15rem;
		display: flex;
		justify-content: space-between;
	}

	.videoTab {
		padding: 0.3rem 0.15rem;
	}

	.videoTabClick {
		background: #fff;
		display: flex;
		height: 0.375rem;
		border-radius: 0.08rem;
		justify-content: space-around;
		align-items: center;
	}

	.onTab {
		height: 0.375rem;
		color: #d96932;
		line-height: 0.375rem;
		border-bottom: 0.02rem solid #d96932;
		box-sizing: border-box;
	}

	.video {
		width: 100%;
		padding: 0 0.15rem;
		box-sizing: border-box;
	}

	.video-js {
		width: 100%;
		display: block;
	}

	.videoList {
		width: 100%;
		height: 2.5rem;
		margin-bottom: 0.2rem;
		overflow: hidden;
		background: #fff;
		border-radius: 0.08rem 0.08rem 0 0;
	}

	.videoList div {
		width: 100%;
		height: 2rem;
	}

	.videoTit {
		height: 0.5rem !important;
		line-height: 0.5rem;
		padding: 0 0.15rem;
		color: #444444;
	}

	.videoList video {
		width: 100%;
		height: 2rem;
	}

	.handbook {
		width: 100%;
		padding: 0.2rem 0;
		box-sizing: border-box;
	}

	.handbook>div {
		background: #fff;
		padding: 0.1rem 0.15rem;
		border-radius: 0.06rem;
	}
</style>